<template>
  <q-page class="row  justify-evenly">
    <article-list :articles="articles" @pageChange="pageChange"></article-list>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import articleList from 'src/components/article/list.vue';
@Component({
  components: { articleList },
  mounted() {
    console.log(this.$route.params);
    const tag = this.$route.params.value;
    this.$store.dispatch('article/ListByTag', {
      tag
    });
    this.$store.dispatch('headerCover/Init', {
      visible: true,
      bgImg:
        'https://tva4.sinaimg.cn/large/0084aYsLly1ge7bivvvswj31hc0u078j.jpg',
      title: tag,
      showArrow: false,
      subTitle: '什么结局能配得上这一路颠沛流离'
      // subtitle: `最后更新与${store.state.article.archive.data.statistics.lastUpdateTime}`,
    });
  }
})
export default class TagPost extends Vue {
  get articles(): Array<any> {
    return this.$store.state.article.articlesByTag.data;
  }

  get pagination(): any {
    return this.$store.state.article.articlesByTag.pagination;
  }
  //分页点击回调
  public async pageChange(page: number) {
    var param = {
      page: page,
      pageSize: this.pagination.pageSize,
      category: this.$route.params.value
    };
    await this.$store.dispatch('article/ListByCategory', param);
  }
}
</script>
